<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_图书管理_获取数据</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        :root {
            font-size: 15px;
        }

        body {
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <!-- 栅格系统 -->
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <h1>图书管理(里面的数据都是可以修改添加的)</h1>
            <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal"
                id="myAddBtn">添加</button>
        </div>
        <table class="table table-bordered table-striped table-dark table-hover text-center">
            <thead>
                <!-- 表头行 -->
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">书名</th>
                    <th scope="col">作者</th>
                    <th scope="col">出版社</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 表格中的每一行 -->
                <!-- <tr>
                    <th scope="row">xxx</th>
                    <td>xxx</td>
                    <td>xxx</td>
                    <td>xxx</td>
                    <td>
                        <button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                        <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addForm" class="p-3">
                        <!-- 书名 -->
                        <div class="mb-3">
                            <label class="form-label">书名</label>
                            <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称"
                                name="bookname" />
                        </div>
                        <!-- 作者 -->
                        <div class="mb-3">
                            <label class="form-label">作者</label>
                            <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
                        </div>
                        <!-- 出版社 -->
                        <div class="mb-3">
                            <label class="form-label">出版社</label>
                            <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称"
                                name="publisher" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="addBtn">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!-- edit Modal -->
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm" class="p-3">
                        <input type="hidden" name="id" />
                        <!-- 书名 -->
                        <div class="mb-3">
                            <label class="form-label">书名</label>
                            <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称"
                                name="bookname" />
                        </div>
                        <!-- 作者 -->
                        <div class="mb-3">
                            <label class="form-label">作者</label>
                            <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
                        </div>
                        <!-- 出版社 -->
                        <div class="mb-3">
                            <label class="form-label">出版社</label>
                            <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称"
                                name="publisher" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="editBtn">确认</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="./js/form-serialize.js"></script>
    <script>
        //获取数据并显示的函数
        function render() {
            axios({
                url: "http://ajax-api.itheima.net/api/books",
                method: "GET"
            }).then(res => {
                console.log(res.data.data);
                let str = "";
                res.data.data.forEach(ele => {
                    str += `<tr>
                    <th scope="row">${ele.id}</th>
                    <td>${ele.bookname}</td>
                    <td>${ele.author}</td>
                    <td>${ele.publisher}</td>
                    <td>
                        <button type="button" class="btn btn-link btn-sm  btn-delete" data-id="${ele.id}">删除</button>
                        <button type="button" class="btn btn-link btn-sm btn-update" data-id="${ele.id}">编辑</button>
                    </td>
                </tr> `
                });

                document.querySelector("tbody").innerHTML = str
            })
        }

        // 添加数据的拟态框
        const addModal = new bootstrap.Modal(document.querySelector('#addModal'))
        // 修改数据的拟态框
        const editModal = new bootstrap.Modal(document.querySelector('#editModal'))

        const editForm = document.querySelector('#editForm')


        const addForm = document.querySelector('#addForm')
        const editBtn = document.querySelector('#editBtn')


        render()









        document.querySelector("tbody").addEventListener("click", function (e) {
            // 删除
            console.dir(e.target);
            if (e.target.classList[3] === "btn-delete") {
                console.dir();
                axios({
                    url: `http://ajax-api.itheima.net/api/books/${e.target.dataset.id}`,
                    method: "DELETE",

                }).then(res => {
                    render()

                })
                //修改数据
            } else if (e.target.classList[3] === "btn-update") {

                axios({
                    url: `http://ajax-api.itheima.net/api/books/${e.target.dataset.id}`,
                    method: 'GET',


                }).then(res => {
                    // 修改数据之回显数据到拟态框
                    if (e.target.dataset.id) {
                        editModal.show()
                       
                        editForm[0].value = res.data.data.bookname

                        editForm[1].value = res.data.data.bookname
                        editForm[2].value = res.data.data.author
                        editForm[3].value = res.data.data.publisher
                                // 单击确定修改数据保存到服务器
                        editBtn.addEventListener("click", function () {
                            let formObj = serialize(editForm, { hash: true })
                            axios({
                                url: `http://ajax-api.itheima.net/api/books/${res.data.data.id}`,
                                method: 'PUT',
                                data: formObj
                            }).then(res => {
                                // 8. 更新成功后, 重新请求数据铺设, 并让编辑框清空并关闭
                                editForm.reset() // 触发form的原生事件方法让它重置
                                editModal.hide() // 触发BS内置方法, 让BS的模块框消失
                                // setBooksListFn()
                                render()
                            })
                        })

                    } else {
                        alert("这本书不见了")
                    }


                })

            }

        })
        //修改数据




        //添加数据

        document.querySelector('#addBtn').addEventListener('click', e => {
            // 4. 收集模态框里表单数据对象
            e.preventDefault
            let formObj = serialize(addForm, { hash: true })

            // 5. 基于axios发给服务器完成添加业务
           
                axios({
                url: 'http://ajax-api.itheima.net/api/books',
                method: 'POST',
                data: formObj
            }).then(({ data: res }) => {

                // 6. 重新请求并铺设覆盖, 并让表单清空, 模态框消失
                addForm.reset() // 触发form的原生事件方法让它重置
                addModal.hide() // 触发BS内置方法, 让BS的模块框消失
                // setBooksListFn()
                render()

            })
            
       
        })



        

    </script>
</body>

</html>